<template>

  <el-row style="backgroundColor:white;height:600px;">
   <el-row>
     <el-col :span="24" :xs="24">
       <h1 style="text-align:center;">欢迎使用注册</h1>
     </el-col>
   </el-row>
  <el-row>
    <el-col :span="20" :push="2" :xs="24" >
      <el-tabs :activeName="phone" type="card">
        <el-tab-pane label="手机注册" name="phone">
          <el-row>
      <el-col :span="16" :push="7" :xs="24">
      <el-form ref="form" size="small" style="width:60%;margin-top:100px;" :label-position="position"  class="demo-ruleForm"   :rules="rules" :model="form" label-width="80px">
<el-form-item label="手机号码" prop="phone">
    <i class="el-icon-phone"></i>
    <el-input v-model="form.phone" type="text" placeholder="" ></el-input>
  </el-form-item>
  <el-form-item label="验证码" prop="yzm">
    
    <el-input v-model="form.yzm" type="text"></el-input></el-form-item>
  <el-form-item label=""><el-button type="primary" style="margin-top:15px;" @click="yzm">{{yz}}</el-button></el-form-item>
      <el-form-item label="按钮">
        <el-button type="primary" @click="zhu">提交</el-button>
      </el-form-item>
</el-form>
    <el-radio-group v-model="position">
      <el-radio label="right">右</el-radio>
       <el-radio label="top">中</el-radio>
        <el-radio label="left">左</el-radio>
    </el-radio-group>
    </el-col>
   </el-row>
        </el-tab-pane>
        <el-tab-pane label="账号注册" name="zhang">
           <el-row>
      <el-col :span="16" :push="7" :xs="24">
      <el-form ref="form" size="small" style="width:60%;margin-top:100px;" :label-position="position"  class="demo-ruleForm"   :rules="rules" :model="form" label-width="80px">
<el-form-item label="账号" prop="name">
    <i class="el-icon-user"></i>
    <el-input v-model="form.name" type="text" placeholder="" ></el-input>
  </el-form-item>
 <el-form-item label="密码" prop="pass">
    <i class="el-icon-message"></i>
    <el-input v-model="form.pass" type="password" placeholder="" ></el-input>
  </el-form-item>
   <el-form-item label="再次输入密码" prop="pass">
    <i class="el-icon-message"></i>
    <el-input v-model="form.pass" type="password" placeholder="" ></el-input>
  </el-form-item>  
      <el-form-item label="按钮">
        <el-button type="submit">提交</el-button>
        <el-button type="reset" @click="reset('form')">重置</el-button>
      </el-form-item>
</el-form>
    <el-radio-group v-model="position">
      <el-radio label="right">右</el-radio>
       <el-radio label="top">中</el-radio>
        <el-radio label="left">左</el-radio>
    </el-radio-group>
    </el-col>
   </el-row>
        </el-tab-pane>
      </el-tabs>
    </el-col>
  </el-row>
  
  </el-row>
</template>
<script>
import axios from 'axios'
import qs from "qs"
export default {
  data(){
    return {
      phone:"phone",
      position:"left",
      yz:"验证码发送",
      t:"",
      rd:"",
      info:"",
      form:{
        name:"",
        pass:"",
        time:new Date().toLocaleString(),
        yzm:"",
        phone:"",
      },
      rules:{
        name:[
          {required:true,message:"请输入账号",trigger:"blur"},
        ],
        pass:[
          {required:true,message:"请输入密码",trigger:"blur"},
          {min:3,max:5,message:'长度在3-5个范围',trigger:"blur"}
        ],
       phone:[
         {
           required:true,message:"请输入手机号",trigger:"blur"
         },
         {
           min:11,max:11,message:"请输入正确手机号",trigger:"blur"
         }
       ],
       yzm:[
         {
           required:true,message:"请输入验证码",trigger:"blur"
         }
       ]   
      },
      
    }
  },
  methods:{
    reset:function(formname){
      this.$refs[formname].resetFields();
      
    },
    zhu(){
      const str=/^(13[0-9]|14[5|7]|15[0|1|2|3|4|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/
      const t=str.test(this.form.phone)
      if(t){
        console.log("符合标准");
        console.log(str.compile(this.form.phone))
        this.$store.state.phone=this.form.phone
        if(this.rd==this.form.yzm){
            console.log(this.rd)
            this.$store.dispatch("zhu")
           // const a=200

            console.log(this.$store.state.info)
            if(this.$store.state.info.success=="200"){
              // this.$confirm("是否跳转","提示",{
              //   confirmButtonText:"确定",
              //   cancalButtonText:"取消",
              //   type:"warning"
              // }).then(()=>{
              //    this.$router.push({
              //   name:"view",
              //   params:{
              //     name:this.form.phone
              //   }
              // })
              // }).catch(()=>{
              //   this.$message({
              //     type:"info",
              //     message:"跳转取消"
              //   })
              // })
              this.$router.push({
                name:"view",
                params:{
                  name:this.form.phone
                }
              })
            }
        }
        else{
          this.info="验证码错误"
        }
      }
      else{
        console.log("不符合格式");
      }
    },
    // updated() {
    //   console.log(1)
    //   console.log(this.$store.state.info)
    // },
    yzm(){
        let phone=this.form.phone
        let t=60
        this.t=setInterval(()=>{
              t=t-1
              if(t==-1){
                this.yz="验证码发送"
              }
              if(t>0){
                this.yz=t+"秒后可发送"
              }
        },1000)
       
    
          const data={
              phone:phone 
          }
          const header={
            headers:{
              "Content-Type":"application/x-www-form-urlencoded"
            }
          }
          axios.post("http://localhost/dome.php",qs.stringify(data),header).then(res=>{
            this.rd=res.data.rand
          }).catch((err)=>{
            console.log(err);
          })
        }
      
        
    },
   
  destroyed(){
    clearInterval(this.t)
  }
}
</script>

